<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Comment</title>
	<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../themes/icon.css">
	<script type="text/javascript" src="../js/jquery.min.js"></script>
	<script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="../js/jquery.serializejson.min.js"></script>
	<style type="text/css">
		#newdlg ul{
			padding: 0;
		}
    	#newdlg li{
    		list-style: none;
    		font-size: 24px;
    		padding: 5px 0;
    		border: 1px solid aqua;
    		margin-bottom: 5px;
    	}
    </style>
</head>
<body>			
<div class="easyui-layout" data-options="fit:true">
	<div data-options="region:'north',split:true" style="height:40px;border:0">
		<a href="#" id='allCommData' class="easyui-linkbutton" data-options="iconCls:'icon-reload'" style="height:32px;">所有评论</a>
		<a href="#" onclick="$('#dlg').dialog('open');$('#ff').form('clear');" class="easyui-linkbutton" data-options="iconCls:'icon-add'" style="height:32px;">添加评论</a>
		<a href="#" id='removes' class="easyui-linkbutton" data-options="iconCls:'icon-remove'" style="height:32px;">删除多个评论</a>
		<input class="easyui-searchbox" data-options="prompt:'Please Input Value',searcher:doSearch" style="width:380px;height:32px;">
	</div>
	<div data-options="region:'center'">
		<table id="dg"></table>
	</div>
</div>

<div id="dlg" class="easyui-dialog" title="添加评论" data-options="iconCls:'icon-save',closed:true" style="width:480px;height:420px;padding:10px">
	<form id="ff" method="post" action="">
		<div style="margin-bottom:20px">
			<input class="easyui-textbox" name="title" style="width:100%" data-options="label:'标题:',required:true">
		</div>
		<div style="margin-bottom:20px">
			<input class="easyui-textbox" name="name" style="width:100%" data-options="label:'姓名:',required:true">
		</div>
		<div style="margin-bottom:20px">
			<input class="easyui-textbox" name="desc" style="width:100%;height:60px" data-options="label:'评价:',multiline:true">
		</div>
	</form>
	<div style="text-align:center;padding:5px 0">
		<a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()" style="width:80px">Submit</a>
		<a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()" style="width:80px">Clear</a>
	</div>
</div>
<div id="newdlg" class="easyui-dialog" title="评论详情" data-options="iconCls:'icon-save',closed:true" style="width:400px;height:360px;padding:10px">		        
	<ul>
        <li class="news-title"></li>
        <li value="AK" class="news-author"></li>
        <li value="AZ" class="news-desc"></li>
        <li value="AR" class="news-date"></li>
     </ul>
</div>
		<script>
			$('#dg').datagrid({
				fit:true,
				border:false,
				pagination:true,
				pageSize:5,
				pageList: [5,10,15,20],
				url:'http://localhost:3000/comment/list',
				columns:[[
					{field:'ck',checkbox:true},
					{field:'title',title:'标题',width:'10%',align:'center'},
					{field:'name',title:'姓名',width:'10%',align:'center'},
					{field:'desc',title:'评论',width:'25%',align:'center'},
					{field:'operate',title:'操作',width:'25%',align:'center',formatter: function(value,row,index){
						return "<a onclick=deleteData('"+row._id+"')>删除</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a onclick=upData('"+row._id+"')>修改</a>"
					}},
					{field:'see',title:'详情', width:80,
						formatter: function(value,row,index){
							return "<a onclick=seeData('"+row._id+"')>查看</a>"
						}
					}
				]]
			});
				
			
			function clearForm(){
				$('#ff').form('clear');
				$('#dg').datagrid('reload')
			}
			  function doSearch(value){
	            $('#dg').datagrid({
	            	queryParams: {
	            		name: value
	            	}
	            }).datagrid('reload')
	        }
			
			$('#allCommData').click(function(){
				$('#dg').datagrid({
	            	queryParams: {
	            		_v: 0
	            	}
	            }).datagrid('reload')
			})
			  //删除多个
			$('#removes').click(function(){
				var rows=$('#dg').datagrid('getSelections');
				if(rows.length>0){
                	var ids=[];
                	rows.forEach(function(item,idx){
	                	ids.push(item._id)
								
	              	})
	           
				    $.messager.confirm('删除评论', '是否删除评论?', function(r){
			           if (r){
		                	$.ajax({
		                		type:"post",
		                		url:"http://localhost:3000/comment/data/removes",
		                		data:{
		                			ids:ids.toString()
		                		},
		                		async:true
		                	}).done(function(res){
		                		$('#dg').datagrid('reload')
		                	})
		                }
		            }) 
				}
		    })
			function deleteData(id){
    	
		    	$.messager.confirm('确认删除', '你确定要执行此操作吗？', function(r){
		            if (r){
		                $.ajax({
				    		type:"delete",
				    		url:"http://localhost:3000/comment/data/"+id,
				    		async:true
				    	}).done(function(res){
				    		$('#dg').datagrid('reload');
				    	})
		            }
		        });    	
		    }
			
			var upid=null;
			function upData(id){
				$.ajax({
					type:"get",
					url:"http://localhost:3000/comment/data/"+ id,
					async:true
				}).done(function(res){
					$('#ff').form('load',res)
					$('#dlg').dialog('open')
					upid=id;
				});
			}
			function submitForm(){
				
				if(upid!=null){
					//修改
					var postdata=$('#ff').serializeJSON();
					$.ajax({
						type:"put",
						url:"http://localhost:3000/comment/data/" +upid,
						data: postdata,
						async:true
					}).done(function(res){
						$('#dlg').dialog('close');
						$('#dg').datagrid('reload');
						upid=null;
					});
					
				}else{
					//添加
					var postdata=$('#ff').serializeJSON();
					$.ajax({
						type:"post",
						url:"http://localhost:3000/comment/data",
						data: postdata,
						async:true
					}).done(function(res){
						$('#dlg').dialog('close');
						$('#dg').datagrid('reload')
					})
				}
			}
			
			function seeData(id){
		    	$.ajax({
		    		type:"get",
		    		url:"http://localhost:3000/news/data/"+id,
		    		async:true
		    	}).done(function (res) {
		    		$('#aa').tabs('add',{
		                title: 'Tab'+index,
		                content: '<div style="padding:10px">Content'+index+'</div>',
		                closable: true
		            });
		//  		$('#ff').form('load', res);
		//  		$('#dlg').dialog('open');
		    	})  	
		    }
			function seeData(id){    	
		    	$.ajax({
		    		type:"get",
		    		url:"http://localhost:3000/comment/data/"+id,
		    		async:true
		    	}).done(function (res) {
		    		$('#newdlg').dialog('open');
//		  			console.log(res.title);
		    		$('.news-title').html('标题:'+res.title);
		    		$('.news-author').html('用户:'+res.name);
		    		$('.news-date').html('时间:'+res.date);
		    		$('.news-desc').html('内容:'+res.desc);
		    	})  	
		    }
		</script> 
</body> 
</html>
